<!--
 * @Description  : 
 * @Author       : jiangxiaoying
 * @Date         : 2021-03-09 13:23:57
 * @LastEditTime : 2021-03-11 18:30:42
 * @LastEditors  : jiangxiaoying
 * @FilePath     : \cloud-components\docs\pages\components\cloud-collapse\example2.vue
-->
<template>
  <div>
    <CloudCollapse
      :collapses="collapses1"
      :showArrow="true"
      v-model="activeKey"
      @change="change"
    >
      <template #expandIcon="props">
        <CloudIcon type="caret-right" :rotate="props.isActive ? 90 : 0" />
      </template>
      <CloudIcon slot="extra" type="setting" />
      <div>我是content我是content我是content我是content我是content</div>
    </CloudCollapse>
  </div>
</template>

<script>
export default {
  title: '2.自定义切换图标',
  data() {
    return {
      activeKey: [],
      collapses: [
        {
          id: '0',
          title: 'a'
        },
        {
          id: '1',
          title: 'b'
        },
        {
          id: '2',
          title: 'c',
          disabled: true
        }
      ],
      collapses1: [
        {
          id: '0',
          title: 'a'
        },
        {
          id: '1',
          title: 'b'
        },
        {
          id: '2',
          title: 'c'
        }
      ],
    }
  },
  methods: {
    change(key) {
      console.log('activeKey', this.activeKey)
      console.log('key', key)
    }
  }
}
</script>

<style lang="scss">
</style>